<template>
  <div class="ex-render">
    <div class="ex-forms-container bg">
      <div class="ex-forms-container-box">
        <el-scrollbar class="ex-forms-box-scrollbar" :class="{
          'ex-box-pc': formConfig.patternType == 'pc',
          'ex-box-pad': formConfig.patternType == 'pad',
          'ex-box-h5': formConfig.patternType == 'h5'
        }">
          <el-form ref="formRef" class="ex-render-form" :model="formData" :rules="formRulse" v-bind="formConfig"
            :disabled="disabled">
            <template v-for="item in widgetList" :key="item.id">
              <template v-if="item.category === 'container'">
                <component v-if="!item.options.hidden" :is="`${item.type}-item`" :widget-data="item"
                  :form-data="formData" :key="item.id" />
              </template>
              <template v-else>
                {{ item }}
                <form-item :widget-data="item" :form-data="formData" :key="item.id" />
              </template>
            </template>
          </el-form>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { deepClone } from "/@/components/fromDesigner/utils";
import { MODEL_LIST, DesFormWidget } from "/@/components/fromDesigner/core";
import { traverseFieldWidget } from "/@/components/fromDesigner/core/src/generator/vue3Js";
import { getRegExp } from "/@/components/fromDesigner/constants";

import { formRenderProps } from "./form-render";

defineOptions({ name: "ExFormRender" });
const props = defineProps(formRenderProps);

const formRef = ref<FormInstance>();
const formData = ref<{ [key: string]: any }>({});
let formRulse = reactive<any>({

})
const originalData = ref<{ [key: string]: any }>({});
const disabled = ref(false);
const rulesList = <any>ref([])
const buildDefaultValueListFn = () => {
  return function (widget: DesFormWidget) {
    if (MODEL_LIST.includes(widget.type)) {
      let { modelDefaultValue, name } = widget.options;
      formData.value[name] = modelDefaultValue ?? null;
 
    }
  };
};
const buildRulesListFn = () => {
  return function (widget: DesFormWidget) {
    if (MODEL_LIST.includes(widget.type)) {
      let { required, validation, validationHint, name,label } = widget.options;
      if (required || validation) {
        let message = validationHint ? validationHint : label + "不可为空";
        // let requiredText = !required
        //   ? `{required:true,
        //   message:"${message}"},`
        //   : "";
        let requiredText = required
          ? {
            required: true,
            trigger: 'change',
            message:  message
          }
          : { required: false };

        // let validationText = validation
        //   ? `{
        //     pattern:${getRegExp(validation)},
        //     trigger: ['blur', 'change'],
        //     message:"${message}"
        //   }`
        //   : "";
         let validationText = validation
          ? {
            pattern:getRegExp(validation), 
            trigger: ['blur', 'change'],
            message:message
          }
          : {};

        formRulse[name] = [requiredText]

        // let rulesText = `${widget.options.name}:[${requiredText}${validationText}],`;

        // rulesList.value.push(rulesText);
      }
    }
  };
};



const addFormName = () => {
  let { widgetList, formConfig } = props;
  traverseFieldWidget({
    widgetList,
    formConfig,
    cb: (widget) => {
      buildDefaultValueListFn()(widget);
    }
  });
  originalData.value = deepClone(formData.value);

};
const addFormRule = () => {
  let { widgetList, formConfig } = props;
  traverseFieldWidget({
    widgetList,
    formConfig,
    cb: (widget) => {
      buildRulesListFn()(widget);
    }
  });

}

const ondisabled = () => {
  disabled.value = true;
};

const undisable = () => {
  disabled.value = false;
};

const resetForm = () => {
  formData.value = deepClone(originalData.value);
};

onMounted(() => {
  addFormName();
  addFormRule()
});

defineExpose({
  ondisabled,
  undisable,
  resetForm,
  originalData,
  formData
});
</script>
